<template>
  <div>
    <el-container>
      <el-header class="header">
        <img class="img1" src="../assets/loginimg/logo.png" />
        <div class="phone">
          <i class="el-icon-phone-outline"></i>
          <span>400-102-6688</span>
        </div>
      </el-header>
      <el-main class="main">
        <el-form
          class="form"
          ref="form"
          style="width: 420px"
          :rules="rules"
          :model="form"
        >
          <b>使用手机号</b>
          <strong>直接登录</strong>
          <p>无需注册,登录即成为会员</p>
          <el-form-item class="inp1" prop="phone">
            <el-input v-model="form.phone" placeholder="输入手机号"></el-input>
          </el-form-item>
          <el-form-item class="inp2" prop="captcha">
            <el-input
              v-model="form.captcha"
              placeholder="输入验证码"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn1">获取验证码</el-button>
          </el-form-item>

          <el-form-item>
            <el-button @click="submit" class="btn2">登录</el-button>
          </el-form-item>
          <el-form-item class="inp3">
            <input type="checkbox" />
            <span>已阅读并同意</span
            ><a href="">&lt;&lt;会员服务协议及隐私政策&gt;&gt;</a>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  import {MessageBox} from "element-ui";
  export default {
    data() {
      return {
        form: {
          phone: "",
        },
        rules: {
          phone: [
            {required: true, message: "手机号必填", trigger: "blur"},
            {
              pattern: /^1[3-9]\d{9}$/,
              message: "手机号码格式不正确",
              trigger: "blur",
            },
          ],
          captcha: [{required: true, message: "验证码必填", trigger: "blur"}],
        },
      };
    },
    methods: {
      submit() {
        //提交表单
        this.$refs["form"].validate(valid => {
          if (valid) {
            alert("验证成功");
          } else {
            alert("验证失败");
          }
        });
      },
    },
  };
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
  }
  .header {
    width: 100vw;
    position: relative;
    background-image: url("../assets/loginimg/ccc.jpg");
    height: 100px !important;
  }
  .header .img1 {
    position: absolute;
    left: 10%;
    top: 5%;
  }
  .header .phone {
    position: absolute;
    right: 10%;
    top: 30%;
  }
  .phone .el-icon-phone-outline {
    font-size: 25px;
  }
  .phone span {
    display: inline-block;
    margin-bottom: 20px;
    color: #ff8a00;
    font-size: 25px;
  }
  .main {
    width: 100vw;
    background-image: url("../assets/loginimg/logIn_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 75vh;
    position: relative;
  }
  .form {
    width: 420px;
    height: 392px;
    float: right;
    margin-top: 5%;
    margin-right: 5%;
    background-color: white;
    border-radius: 10px;
  }
  .form .inp1 {
    margin-top: 20px;
    width: 300px;
    margin-left: 60px;
    border-radius: 10px;
  }
  .form .inp2 {
    margin-left: 60px;
    width: 180px;
    border-radius: 10px;
  }
  .form .btn1 {
    float: right;
    margin-top: -62px;
    margin-right: 60px;
    border-radius: 10px;
    border-color: #33c88e;
    color: #33c88e;
  }
  .form .btn2 {
    border-radius: 10px;
    width: 300px;
    margin-left: 60px;
    float: left;
    margin-top: -20px;
    background-color: #ff8a00;
    color: white;
  }
  .form b {
    color: #ff8a00;
    display: inline-block;
    margin-top: 40px;
    margin-left: 120px;
  }
  .form p {
    font-size: 12px;
    margin-left: 120px;
  }
  .form .inp3 {
    margin-top: -10px;
    margin-left: 60px;
  }
  .form .inp3 input {
    margin-right: 5px;
  }
  .form .inp3 a {
    text-decoration: none;
    color: #33c88e;
  }
</style>
